<template>
      <div class="main-content">
        <div style="width: 90%">
          <div id="Bie" style="width: 100%;height:700px"></div>
          <div id="xy" style="width: 100%;height:300px"></div>
          <div id="qx" style="width: 100%;height:500px"></div>
          <div id="nb" style="width: 100%;height:500px"></div>
          <div id="zs" style="width: 100%;height:500px"></div>
          <div style="width: 100%;height:500px;margin-top: 30px">
              <div style="height: 10%; width: 30%">
                  <span style="font-size: 30px">综合分数：{{Sug.score}}</span>
              </div>
            <br>
            <hr>
              <div style="">
                <div><span style="font-size: 30px">分析寄语： </span></div>
                <br>
                <div style="margin-bottom: 30px"><span style="font-size: 25px;margin-top: 40px">  {{Sug.sug}}</span></div>
                <hr>
              </div>
          </div>
        </div >

      </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "BlogDetail",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      blogId: this.$route.query.blogId,  //route和router有区别
      blog: {},
      Sug: {},
      tagsAll: [],
    }
  },
  mounted() {
    this.load()
    this.initBie();
    this.initXY();
    this.initQX();
    this.initnb();
    this.initzs();
  },
  methods: {
    initzs(){
      var chartDom = document.getElementById('zs');
      var myChart = echarts.init(chartDom);
      var option;

// prettier-ignore
      const hours = [
        '12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a', '10a', '11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'
      ];
// prettier-ignore
      const days = [
        '压力指数', '情绪指数', '专注指数',
        '放松指数', '正念指数', '波频指数', '反应指数'
      ];
// prettier-ignore
      const data = [[0, 0, 5], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 9, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
      const title = [];
      const singleAxis = [];
      const series = [];
      days.forEach(function (day, idx) {
        title.push({
          textBaseline: 'middle',
          top: ((idx + 0.5) * 100) / 7 + '%',
          text: day
        });
        singleAxis.push({
          left: 150,
          type: 'category',
          boundaryGap: false,
          data: hours,
          top: (idx * 100) / 7 + 5 + '%',
          height: 100 / 7 - 10 + '%',
          axisLabel: {
            interval: 2
          }
        });
        series.push({
          singleAxisIndex: idx,
          coordinateSystem: 'singleAxis',
          type: 'scatter',
          data: [],
          symbolSize: function (dataItem) {
            return dataItem[1] * 4;
          }
        });
      });
      data.forEach(function (dataItem) {
        series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
      });
      option = {
        tooltip: {
          position: 'top'
        },
        title: title,
        singleAxis: singleAxis,
        series: series
      };

      option && myChart.setOption(option);

    },
    initnb(){
      var ROOT_PATH = 'https://echarts.apache.org/examples';

      var chartDom = document.getElementById('nb');
      var myChart = echarts.init(chartDom);
      var option;

      const dataURL = ROOT_PATH + '/data/asset/data/fake-nebula.bin';
      const xhr = new XMLHttpRequest();
      xhr.open('GET', dataURL, true);
      xhr.responseType = 'arraybuffer';
      myChart.showLoading();
      xhr.onload = function (e) {
        myChart.hideLoading();
        var rawData = new Float32Array(this.response);
        option = {
          title: {
            left: 'center',
            text:
                echarts.format.addCommas(Math.round(rawData.length / 2)) + ' Points',
            subtext: '脑部信号分布'
          },
          tooltip: {},
          toolbox: {
            right: 20,
            feature: {
              dataZoom: {}
            }
          },
          grid: {
            right: 70,
            bottom: 70
          },
          xAxis: [{}],
          yAxis: [{}],
          dataZoom: [
            {
              type: 'inside'
            },
            {
              type: 'slider',
              showDataShadow: false,
              handleIcon:
                  'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%'
            },
            {
              type: 'inside',
              orient: 'vertical'
            },
            {
              type: 'slider',
              orient: 'vertical',
              showDataShadow: false,
              handleIcon:
                  'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%'
            }
          ],
          animation: false,
          series: [
            {
              type: 'scatter',
              data: rawData,
              dimensions: ['x', 'y'],
              symbolSize: 3,
              itemStyle: {
                opacity: 0.4
              },
              blendMode: 'source-over',
              large: true,
              largeThreshold: 500
            }
          ]
        };
        myChart.setOption(option);
      };
      xhr.send();

      option && myChart.setOption(option);

    },
    initQX() {
      var chartDom = document.getElementById('qx');
      var myChart = echarts.init(chartDom);
      var option;

      let base = +new Date(2022, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 500; i++) {
        var now = new Date((base += oneDay));
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: '复合情绪统计'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    initXY(){
      var chartDom = document.getElementById('xy');
      var myChart = echarts.init(chartDom);
      var option;

// prettier-ignore
      const data = [["2024-01-07 16:00", 116], ["2024-01-07 16:30", 129], ["2024-01-07 17:00", 135], ["2024-01-07 17:30", 86], ["2024-01-07 18:00", 73], ["2024-01-07 18:30", 85], ["2024-01-07 19:00", 73], ["2024-01-07 19:30", 68], ["2024-01-07 20:00", 92], ["2024-01-07 20:30", 130], ["2024-01-07 21:00", 245], ["2024-01-07 21:30", 139], ["2024-01-07 22:00", 115], ["2024-01-07 23:30", 111], ["2024-01-07 24:00", 309], ["2024-01-08 00:30", 100], ["2024-01-08 01:00", 121], ["2024-01-08 01:30", 128], ["2024-01-08 02:00", 110], ["2024-01-08 02:30", 101], ["2024-01-08 03:00", 103], ["2024-01-08 03:30", 106], ["2024-01-08 04:00", 102], ["2024-01-08 04:30", 103], ["2024-01-08 05:00", 105], ["2024-01-08 05:30", 104], ["2024-01-08 06:00", 115], ["2024-01-08 06:30", 125], ["2024-01-08 07:00", 107], ["2024-01-08 07:30", 82], ["2024-01-08 08:30", 150], ["2024-01-08 09:00", 72], ["2024-01-08 09:30", 106], ["2024-01-08 10:00", 107], ["2024-01-08 10:30", 66], ["2024-01-08 11:00", 91], ["2024-01-08 11:30", 92], ["2024-01-08 12:00", 113], ["2024-01-08 12:30", 107]];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1
          }
        ],
        title: [
          {
            left: 'center',
            text: '情绪y值'
          },
          {
            top: '55%',
            left: 'center',
            text: 'Gradient along the x axis'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList
          },
          {
            data: dateList,
            gridIndex: 1
          }
        ],
        yAxis: [
          {},
          {
            gridIndex: 1
          }
        ],
        grid: [
          {
            bottom: '60%'
          },
          {
            top: '60%'
          }
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          },
          {
            type: 'line',
            showSymbol: false,
            data: valueList,
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      };

      option && myChart.setOption(option);
    },
    initBie(){
      let chartDom = document.getElementById('Bie');
      let myChart = echarts.init(chartDom);
      let option;

// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
      const schema = [
        { name: 'Delta', index: 1, text: 'Delta' },
        { name: 'Theta', index: 2, text: 'Theta' },
        { name: 'Alpha', index: 3, text: 'Alpha' },
        { name: 'Bate', index: 4, text: 'Bate' },
        { name: 'Gamma', index: 5, text: 'Gamma' },
        { name: 'eSense', index: 6, text: 'eSense' },
        { name: '等级', index: 7, text: '等级' }
      ];
      const rawData = [
        [55, 9, 56, 0.46, 18, 6, '良', 'Rrlnt'],
        [25, 11, 21, 0.65, 34, 9, '优', 'Rrlnt'],
        [56, 7, 63, 0.3, 14, 5, '良', 'Rrlnt'],
        [33, 7, 29, 0.33, 16, 6, '优', 'Rrlnt'],
        [42, 24, 44, 0.76, 40, 16, '优', 'Rrlnt'],
        [82, 58, 90, 1.77, 68, 33, '良', 'Rrlnt'],
        [74, 49, 77, 1.46, 48, 27, '良', 'Rrlnt'],
        [78, 55, 80, 1.29, 59, 29, '良', 'Rrlnt'],
        [267, 216, 280, 4.8, 108, 64, '重度', 'Rrlnt'],
        [185, 127, 216, 2.52, 61, 27, '中度', 'Rrlnt'],
        [39, 19, 38, 0.57, 31, 15, '优', 'Rrlnt'],
        [41, 11, 40, 0.43, 21, 7, '优', 'Rrlnt'],
        [64, 38, 74, 1.04, 46, 22, '良', 'Rrlnt'],
        [108, 79, 120, 1.7, 75, 41, '轻度', 'Rrlnt'],
        [108, 63, 116, 1.48, 44, 26, '轻度', 'Rrlnt'],
        [33, 6, 29, 0.34, 13, 5, '优', 'Rrlnt'],
        [94, 66, 110, 1.54, 62, 31, '良', 'Rrlnt'],
        [186, 142, 192, 3.88, 93, 79, '中度', 'Rrlnt'],
        [57, 31, 54, 0.96, 32, 14, '良', 'Rrlnt'],
        [22, 8, 17, 0.48, 23, 10, '优', 'Rrlnt'],
        [39, 15, 36, 0.61, 29, 13, '优', 'Rrlnt'],
        [94, 69, 114, 2.08, 73, 39, '良', 'Rrlnt'],
        [99, 73, 110, 2.43, 76, 48, '良', 'Rrlnt'],
        [31, 12, 30, 0.5, 32, 16, '优', 'Rrlnt'],
        [42, 27, 43, 1, 53, 22, '优', 'Rrlnt'],
        [154, 117, 157, 3.05, 92, 58, '中度', 'Rrlnt'],
        [234, 185, 230, 4.09, 123, 69, '重度', 'Rrlnt'],
        [160, 120, 186, 2.77, 91, 50, '中度', 'Rrlnt'],
        [134, 96, 165, 2.76, 83, 41, '轻度', 'Rrlnt'],
        [52, 24, 60, 1.03, 50, 21, '良', 'Rrlnt'],
        [46, 5, 49, 0.28, 10, 6, '优', 'Rrlnt'],
        [26, 37, 27, 1.163, 27, 13, '优', 'PoorSignal '],
        [85, 62, 71, 1.195, 60, 8, '良', 'PoorSignal '],
        [78, 38, 74, 1.363, 37, 7, '良', 'PoorSignal '],
        [21, 21, 36, 0.634, 40, 9, '优', 'PoorSignal '],
        [41, 42, 46, 0.915, 81, 13, '优', 'PoorSignal '],
        [56, 52, 69, 1.067, 92, 16, '良', 'PoorSignal '],
        [64, 30, 28, 0.924, 51, 2, '良', 'PoorSignal '],
        [55, 48, 74, 1.236, 75, 26, '良', 'PoorSignal '],
        [76, 85, 113, 1.237, 114, 27, '良', 'PoorSignal '],
        [91, 81, 104, 1.041, 56, 40, '良', 'PoorSignal '],
        [84, 39, 60, 0.964, 25, 11, '良', 'PoorSignal '],
        [64, 51, 101, 0.862, 58, 23, '良', 'PoorSignal '],
        [70, 69, 120, 1.198, 65, 36, '良', 'PoorSignal '],
        [77, 105, 178, 2.549, 64, 16, '良', 'PoorSignal '],
        [109, 68, 87, 0.996, 74, 29, '轻度', 'PoorSignal '],
        [73, 68, 97, 0.905, 51, 34, '良', 'PoorSignal '],
        [54, 27, 47, 0.592, 53, 12, '良', 'PoorSignal '],
        [51, 61, 97, 0.811, 65, 19, '良', 'PoorSignal '],
        [91, 71, 121, 1.374, 43, 18, '良', 'PoorSignal '],
        [73, 102, 182, 2.787, 44, 19, '良', 'PoorSignal '],
        [73, 50, 76, 0.717, 31, 20, '良', 'PoorSignal '],
        [84, 94, 140, 2.238, 68, 18, '良', 'PoorSignal '],
        [93, 77, 104, 1.165, 53, 7, '良', 'PoorSignal '],
        [99, 130, 227, 3.97, 55, 15, '良', 'PoorSignal '],
        [146, 84, 139, 1.094, 40, 17, '轻度', 'PoorSignal '],
        [113, 108, 137, 1.481, 48, 15, '轻度', 'PoorSignal '],
        [81, 48, 62, 1.619, 26, 3, '良', 'PoorSignal'],
        [56, 48, 68, 1.336, 37, 9, '良', 'PoorSignal '],
        [82, 92, 174, 3.29, 0, 13, '良', 'PoorSignal '],
        [106, 116, 188, 3.628, 101, 16, '轻度', 'PoorSignal '],
        [118, 50, 0, 1.383, 76, 11, '轻度', 'PoorSignal '],
        [91, 45, 125, 0.82, 34, 23, '良', 'Relaxation '],
        [65, 27, 78, 0.86, 45, 29, '良', 'Relaxation '],
        [83, 60, 84, 1.09, 73, 27, '良', 'Relaxation '],
        [109, 81, 121, 1.28, 68, 51, '轻度', 'Relaxation '],
        [106, 77, 114, 1.07, 55, 51, '轻度', 'Relaxation '],
        [109, 81, 121, 1.28, 68, 51, '轻度', 'Relaxation '],
        [106, 77, 114, 1.07, 55, 51, '轻度', 'Relaxation '],
        [89, 65, 78, 0.86, 51, 26, '良', 'Relaxation '],
        [53, 33, 47, 0.64, 50, 17, '良', 'Relaxation '],
        [80, 55, 80, 1.01, 75, 24, '良', 'Relaxation '],
        [117, 81, 124, 1.03, 45, 24, '轻度', 'Relaxation '],
        [99, 71, 142, 1.1, 62, 42, '良', 'Relaxation '],
        [95, 69, 130, 1.28, 74, 50, '良', 'Relaxation '],
        [116, 87, 131, 1.47, 84, 40, '轻度', 'Relaxation '],
        [108, 80, 121, 1.3, 85, 37, '轻度', 'Relaxation '],
        [134, 83, 167, 1.16, 57, 43, '轻度', 'Relaxation '],
        [79, 43, 107, 1.05, 59, 37, '良', 'Relaxation '],
        [71, 46, 89, 0.86, 64, 25, '良', 'Relaxation '],
        [97, 71, 113, 1.17, 88, 31, '良', 'Relaxation '],
        [84, 57, 91, 0.85, 55, 31, '良', 'Relaxation '],
        [87, 63, 101, 0.9, 56, 41, '良', 'Relaxation '],
        [104, 77, 119, 1.09, 73, 48, '轻度', 'Relaxation '],
        [87, 62, 100, 1, 72, 28, '良', 'Relaxation '],
        [168, 128, 172, 1.49, 97, 56, '中度', 'Relaxation '],
        [65, 45, 51, 0.74, 39, 17, '良', 'Relaxation '],
        [39, 24, 38, 0.61, 47, 17, '优', 'Relaxation '],
        [39, 24, 39, 0.59, 50, 19, '优', 'Relaxation '],
        [93, 68, 96, 1.05, 79, 29, '良', 'Relaxation '],
        [188, 143, 197, 1.66, 99, 51, '中度', 'Relaxation '],
        [174, 131, 174, 1.55, 108, 50, '中度', 'Relaxation '],
        [187, 143, 201, 1.39, 89, 53, '中度', 'Relaxation ']
      ];
      const CATEGORY_DIM_COUNT = 6;
      const GAP = 2;
      const BASE_LEFT = 5;
      const BASE_TOP = 10;
// const GRID_WIDTH = 220;
// const GRID_HEIGHT = 220;
      const GRID_WIDTH = (100 - BASE_LEFT - GAP) / CATEGORY_DIM_COUNT - GAP;
      const GRID_HEIGHT = (100 - BASE_TOP - GAP) / CATEGORY_DIM_COUNT - GAP;
      const CATEGORY_DIM = 7;
      const SYMBOL_SIZE = 4;
      function retrieveScatterData(data, dimX, dimY) {
        let result = [];
        for (let i = 0; i < data.length; i++) {
          let item = [data[i][dimX], data[i][dimY]];
          item[CATEGORY_DIM] = data[i][CATEGORY_DIM];
          result.push(item);
        }
        return result;
      }
      function generateGrids() {
        let index = 0;
        const grid = [];
        const xAxis = [];
        const yAxis = [];
        const series = [];
        for (let i = 0; i < CATEGORY_DIM_COUNT; i++) {
          for (let j = 0; j < CATEGORY_DIM_COUNT; j++) {
            if (CATEGORY_DIM_COUNT - i + j >= CATEGORY_DIM_COUNT) {
              continue;
            }
            grid.push({
              left: BASE_LEFT + i * (GRID_WIDTH + GAP) + '%',
              top: BASE_TOP + j * (GRID_HEIGHT + GAP) + '%',
              width: GRID_WIDTH + '%',
              height: GRID_HEIGHT + '%'
            });
            xAxis.push({
              splitNumber: 3,
              position: 'top',
              axisLine: {
                show: j === 0,
                onZero: false
              },
              axisTick: {
                show: j === 0,
                inside: true
              },
              axisLabel: {
                show: j === 0
              },
              type: 'value',
              gridIndex: index,
              scale: true
            });
            yAxis.push({
              splitNumber: 3,
              position: 'right',
              axisLine: {
                show: i === CATEGORY_DIM_COUNT - 1,
                onZero: false
              },
              axisTick: {
                show: i === CATEGORY_DIM_COUNT - 1,
                inside: true
              },
              axisLabel: {
                show: i === CATEGORY_DIM_COUNT - 1
              },
              type: 'value',
              gridIndex: index,
              scale: true
            });
            series.push({
              type: 'scatter',
              symbolSize: SYMBOL_SIZE,
              xAxisIndex: index,
              yAxisIndex: index,
              data: retrieveScatterData(rawData, i, j)
            });
            index++;
          }
        }
        return {
          grid,
          xAxis,
          yAxis,
          series
        };
      }
      const gridOption = generateGrids();
      option = {
        animation: false,
        brush: {
          brushLink: 'all',
          xAxisIndex: gridOption.xAxis.map(function (_, idx) {
            return idx;
          }),
          yAxisIndex: gridOption.yAxis.map(function (_, idx) {
            return idx;
          }),
          inBrush: {
            opacity: 1
          }
        },
        visualMap: {
          type: 'piecewise',
          categories: ['Rrlnt', 'Relaxation ', 'PoorSignal '],
          dimension: CATEGORY_DIM,
          orient: 'horizontal',
          top: 0,
          left: 'center',
          inRange: {
            color: ['#51689b', '#ce5c5c', '#fbc357']
          },
          outOfRange: {
            color: '#ddd'
          },
          seriesIndex: gridOption.series.map(function (_, idx) {
            return idx;
          })
        },
        tooltip: {
          trigger: 'item'
        },
        parallelAxis: [
          { dim: 0, name: schema[0].text },
          { dim: 1, name: schema[1].text },
          { dim: 2, name: schema[2].text },
          { dim: 3, name: schema[3].text },
          { dim: 4, name: schema[4].text },
          { dim: 5, name: schema[5].text },
          {
            dim: 6,
            name: schema[6].text,
            type: 'category',
            data: ['优', '良', '轻度', '中度', '重度', '严重']
          }
        ],
        parallel: {
          bottom: '5%',
          left: '2%',
          height: '30%',
          width: '55%',
          parallelAxisDefault: {
            type: 'value',
            name: 'AQI指数',
            nameLocation: 'end',
            nameGap: 20,
            splitNumber: 3,
            nameTextStyle: {
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#555'
              }
            },
            axisTick: {
              lineStyle: {
                color: '#555'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#555'
            }
          }
        },
        xAxis: gridOption.xAxis,
        yAxis: gridOption.yAxis,
        grid: gridOption.grid,
        series: [
          {
            name: 'parallel',
            type: 'parallel',
            smooth: true,
            lineStyle: {
              width: 1,
              opacity: 0.3
            },
            data: rawData
          },
          ...gridOption.series
        ]
      };

      option && myChart.setOption(option);

    },
    // 获取当前博客信息
    load() {
      // 请求对应blog数据
      this.$request.get('sug/selectSugByUserId').then(res => {
        //或一个空对象，保证稳定
        this.Sug =res.data || {}
      })
    },
  }
}
</script>


<style scoped>

</style>